<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" label-width="98px" ref="queryForm" size="small"
             v-show="showSearch">
      <el-form-item label="订单编号" prop="code">
        <el-input @keyup.enter.native="handleQuery" clearable
                  placeholder="请输入订单编号" v-model="queryParams.code"/>
      </el-form-item>
      <el-form-item label="业务员" prop="master">
        <el-input @keyup.enter.native="handleQuery" clearable
                  placeholder="请输入业务员" v-model="queryParams.master"/>
      </el-form-item>
      <!-- <el-form-item label="客户名称" prop="customName">
        <el-input @keyup.enter.native="handleQuery" clearable
                  placeholder="请输入客户名称" v-model="queryParams.customName"/>
      </el-form-item> -->
      <el-form-item label="质保金回款" prop="retentionStatus">
        <el-select clearable placeholder="是否回款" style="width: 200px" v-model="queryParams.retentionStatus">
          <el-option :key="dict.value"
                     :label="dict.label" :value="dict.value" v-for="dict in dict.type.yes_no"/>
        </el-select>
      </el-form-item>
      <el-form-item label="所属年度" prop="year">
        <el-date-picker clearable
                        placeholder="请选择所属年度"
                        type="year"
                        v-model="queryParams.year"
                        value-format="yyyy">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="所属部门" prop="deptId">
        <treeselect v-model="queryParams.deptId" :options="deptOptions" placeholder="请选择所属部门"
                    style="width:240px;"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" icon="el-icon-search" size="mini" type="primary">搜索</el-button>
        <el-button @click="resetQuery" icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" :max-height="tableMaxHeight" @selection-change="handleSelectionChange"
              v-loading="loading">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" label="订单编号" prop="code" width="200">
      <template slot-scope="scope">
        <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="handleUpdateDetail(scope.row)"
                  style="color: #00afff;cursor:pointer;">{{scope.row.code}}</span>
        </el-tooltip>
      </template>
    </el-table-column>
      <el-table-column align="center" label="订单名称" prop="name" width="200">
        <template slot-scope="scope">
          <el-tooltip class="item" content="点击查看详情" effect="dark" placement="left-start">
            <span @click="handleUpdateDetail(scope.row)"
                  style="color: #00afff;cursor:pointer;">{{scope.row.name}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="业务员" prop="master"/>
      <el-table-column align="center" label="合同签订日期" prop="contractDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.contractDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单金额" prop="contractMoney"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="300">
        <template slot-scope="scope">
          <el-button @click="zhibaojin(scope.row)"  icon="el-icon-view" size="mini" type="text">
            质保金回款
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
                @pagination="getList" v-show="total>0"/>

    <zhibaojin-form @ok="getList" ref="zhibaojinForm"></zhibaojin-form>
  </div>
</template>

<script>
    import { getAction} from '@/api/manage'
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import {treeselect} from "@/api/system/dept";
    import ZhibaojinForm from './module/ZhibaojinForm'

    export default {
        name: "ProjectZhibaojin",
        dicts: ['yes_no', 'fund_callback', 'fund_status', 'tax_status'],
        components: {
          Treeselect,
          ZhibaojinForm
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 订单基础信息管理表格数据
                dataList: [],
                // 查询参数
                queryParams: {
                    yearStr: null,
                    pageNum: 1,
                    pageSize: 20,
                    name: null,
                    master: null,
                    customId: null,
                    customName: null,
                    companyName: null,
                    contractDate: null,
                    contractMoney: null,
                    auditMoney: null,
                    checkDate: null,
                    checkState: null,
                    fundCallback: null,
                    infomation: null,
                    orderByColumn: "create_time",
                    isAsc: "desc",
                    params:{},
                },
                url: {
                    list: '/projectBaseInfo/projectBaseInfo/list',
                },
                tableMaxHeight: window.innerHeight - 320,
                // 部门树选项
                deptOptions: [],
            };
        },
        created() {
            this.initQuery();
            this.getList();
            this.getTreeselect();
        },
        methods: {
          zhibaojin(row){
              this.$refs.zhibaojinForm.handleUpdate(row);
            },
            initQuery() {
                let that = this;
                if (that.$route.query.dataFlag) {
                    that.queryParams.params.dataFlag = that.$route.query.dataFlag;
                }
            },
            /** 查询部门下拉树结构 */
            getTreeselect() {
                treeselect().then(response => {
                    this.deptOptions = response.data;
                });
            },
            /** 查询项目基础信息管理列表 */
            getList() {
                this.loading = true;
                getAction(this.url.list, this.queryParams).then(response => {
                    this.dataList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.$refs.form.handleAdd();
            },

        }
    };
</script>
